<?php

/**
 * 案例展示组件
 * 支持时间线(timeline)和网格(grid)两种布局
 */
$configKey = isset($configKey) ? $configKey : 'case-studies';

// 页面文本配置
$texts = [
    'view_details' => '查看详情',
    'more_cases' => '查看更多案例',
    'featured_tag' => '精选'
];

// 默认配置
$defaultConfig = [
    'section_id' => $configKey,
    'section_pretitle' => '成功案例',
    'section_title' => '我们的作品展示',
    'section_subtitle' => '浏览我们为不同行业客户完成的项目案例，了解我们的专业能力',
    'layout' => 'timeline', // timeline 或 grid
    'timeline_direction' => 'vertical', // vertical 或 horizontal
    'accent_color' => 'blue-600',
    'show_years' => true,
    'columns' => '3', // 网格布局列数(1-4)
    'gap' => 'gap-8',
    'more_url' => '/cases',
    'more_text' => '查看更多案例',
    'button_icon' => 'fa-chevron-right',
    'show_pagination' => false,
    'show_more' => true,
    'total_pages' => 10,
    'items' => [
        [
            'id' => 1,
            'title' => '企业官网重构项目',
            'category' => 'web',
            'description' => '为知名企业重构官网，提升品牌形象和用户体验',
            'image' => 'https://picsum.photos/seed/web1/800/600',
            'client' => '科技未来',
            'year' => '2021',
            'location' => '上海',
            'results' => [
                '页面加载速度' => '提升75%',
                '转化率' => '提升32%',
                '用户停留时间' => '+55%'
            ],
            'featured' => true,
            'url' => '/cases/enterprise-website.php'
        ]
    ],
    'texts' => $texts
];

// 获取传入配置
$customConfig = $pageConfig['components']['case-studies'] ?? [];

// 合并配置
$data = array_merge($defaultConfig, $customConfig);
// 处理颜色类名
$accentClass = "text-{$data['accent_color']} border-{$data['accent_color']}";

// 处理列数类名
$columnClasses = [
    '1' => 'grid-cols-1',
    '2' => 'grid-cols-1 md:grid-cols-2',
    '3' => 'grid-cols-1 md:grid-cols-3',
    '4' => 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4'
];
$columnClass = $columnClasses[$data['columns']] ?? $columnClasses['3'];

// 处理URL
$moreUrl = isset($data['url_converter']) && is_callable($data['url_converter'])
    ? $data['url_converter']($data['more_url'])
    : $data['more_url'];
?>

<section
    id="<?= htmlspecialchars($data['section_id']); ?>"
    class="py-16">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <!-- 标题区域 -->
        <div class="max-w-3xl mx-auto mb-16 text-center">
            <?php if (!empty($data['section_pretitle'])): ?>
                <span class="inline-block text-sm font-semibold <?= $accentClass; ?> uppercase tracking-wider mb-2">
                    <?= htmlspecialchars($data['section_pretitle']); ?>
                </span>
            <?php endif; ?>

            <?php if (!empty($data['section_title'])): ?>
                <h2 class="text-3xl font-bold text-gray-900 mb-4">
                    <?= htmlspecialchars($data['section_title']); ?>
                </h2>
            <?php endif; ?>

            <?php if (!empty($data['section_subtitle'])): ?>
                <p class="text-lg text-gray-600">
                    <?= htmlspecialchars($data['section_subtitle']); ?>
                </p>
            <?php endif; ?>
        </div>

        <!-- 案例内容区域 -->
        <?php if ($data['layout'] === 'timeline'): ?>
            <!-- 时间线布局 -->
            <div class="relative">
                <?php if ($caseConfig['timeline_direction'] === 'vertical'): ?>
                    <!-- 垂直时间线 -->
                    <div class="absolute left-1/2 top-0 bottom-0 w-0.5 bg-gray-200 transform -translate-x-1/2"></div>

                    <div class="space-y-16 relative">
                        <?php foreach ($data['items'] as $index => $milestone): ?>
                            <div class="flex flex-col md:flex-row items-center <?= $index % 2 === 0 ? '' : 'md:flex-row-reverse'; ?>">
                                <!-- 时间点标记 -->
                                <div class="z-10 flex items-center justify-center w-12 h-12 rounded-full bg-<?= $data['accent_color']; ?> text-white font-bold text-xl mb-4 md:mb-0">
                                    <?= $index + 1; ?>
                                </div>

                                <!-- 内容卡片 -->
                                <div class="md:w-5/12 <?= $index % 2 === 0 ? 'md:pr-12 md:text-right' : 'md:pl-12'; ?>">
                                    <?php if ($data['show_years'] && !empty($milestone['year'])): ?>
                                        <div class="inline-block mb-2 text-sm font-medium <?= $accentClass; ?>">
                                            <?= htmlspecialchars($milestone['year']); ?>
                                        </div>
                                    <?php endif; ?>

                                    <div class="bg-white rounded-xl shadow-md p-6 hover:shadow-lg transition-shadow">
                                        <h3 class="text-xl font-semibold mb-2 text-gray-900">
                                            <?= htmlspecialchars($milestone['title']); ?>
                                        </h3>
                                        <p class="text-gray-600 mb-4">
                                            <?= htmlspecialchars($milestone['description']); ?>
                                        </p>

                                        <?php if (!empty($milestone['image'])): ?>
                                            <div class="rounded-lg overflow-hidden mb-4">
                                                <img
                                                    src="<?= htmlspecialchars($milestone['image']); ?>"
                                                    alt="<?= htmlspecialchars($milestone['title']); ?>"
                                                    class="w-full h-auto">
                                            </div>
                                        <?php endif; ?>

                                        <?php if (!empty($milestone['url'])): ?>
                                            <a href="<?= htmlspecialchars($milestone['url']); ?>" class="inline-flex items-center <?= $accentClass; ?> font-medium hover:underline <?= $index % 2 === 0 ? 'ml-auto' : ''; ?>">
                                                <?= htmlspecialchars($data['texts']['view_details']); ?>
                                                <i class="fa fa-arrow-right ml-2 text-sm transition-transform group-hover:translate-x-1"></i>
                                            </a>
                                        <?php endif; ?>
                                    </div>
                                </div>

                                <!-- 空白占位 -->
                                <div class="md:w-5/12"></div>
                            </div>
                        <?php endforeach; ?>
                    </div>
                <?php else: ?>
                    <!-- 水平时间线（适合较少的案例） -->
                    <div class="overflow-x-auto pb-8">
                        <div class="flex min-w-max space-x-8">
                            <?php foreach ($caseConfig['items'] as $index => $milestone): ?>
                                <div class="flex flex-col items-center w-72 flex-shrink-0">
                                    <!-- 时间点标记 -->
                                    <div class="z-10 flex items-center justify-center w-12 h-12 rounded-full bg-<?= $data['accent_color']; ?> text-white font-bold text-xl mb-4">
                                        <?= $index + 1; ?>
                                    </div>

                                    <!-- 连接线（最后一个不显示） -->
                                    <?php if ($index !== count($caseConfig['items']) - 1): ?>
                                        <div class="w-full h-0.5 bg-gray-200 mt-6"></div>
                                    <?php endif; ?>

                                    <!-- 内容卡片 -->
                                    <div class="bg-white rounded-xl shadow-md p-6 hover:shadow-lg transition-shadow mt-6">
                                        <?php if ($data['show_years'] && !empty($milestone['year'])): ?>
                                            <div class="text-center mb-2 text-sm font-medium <?= $accentClass; ?>">
                                                <?= htmlspecialchars($milestone['year']); ?>
                                            </div>
                                        <?php endif; ?>

                                        <h3 class="text-xl font-semibold mb-2 text-gray-900 text-center">
                                            <?= htmlspecialchars($milestone['title']); ?>
                                        </h3>
                                        <p class="text-gray-600 mb-4 text-center">
                                            <?= htmlspecialchars($milestone['description']); ?>
                                        </p>

                                        <?php if (!empty($milestone['url'])): ?>
                                            <a href="<?= htmlspecialchars($milestone['url']); ?>" class="inline-flex items-center <?= $accentClass; ?> font-medium hover:underline mx-auto">
                                                <?= htmlspecialchars($data['texts']['view_details']); ?>
                                                <i class="fa fa-arrow-right ml-2 text-sm"></i>
                                            </a>
                                        <?php endif; ?>
                                    </div>
                                </div>
                            <?php endforeach; ?>
                        </div>
                    </div>
                <?php endif; ?>
            </div>
        <?php else: ?>
            <!-- 网格布局 -->
            <?php if (!empty($data['items'])): ?>
                <div class="grid <?= $columnClass; ?> <?= htmlspecialchars($data['gap']); ?>">
                    <?php foreach ($data['items'] as $case): ?>
                        <div
                            class="case-card"
                            data-category="<?= htmlspecialchars($case['category']); ?>">
                            <div class="bg-white rounded-xl overflow-hidden case-card-shadow case-card-hover h-full flex flex-col">
                                <!-- 案例图片 -->
                                <div class="relative overflow-hidden">
                                    <img
                                        src="<?= htmlspecialchars($case['image']); ?>"
                                        alt="<?= htmlspecialchars($case['title']); ?>"
                                        class="w-full h-64 object-cover transition-transform duration-700 hover:scale-110">

                                    <!-- 分类标签 -->
                                    <div class="absolute top-4 left-4">
                                        <span class="inline-block px-3 py-1 bg-white/90 backdrop-blur-sm text-gray-800 text-sm font-medium rounded-full">
                                            <?= htmlspecialchars($case['category']); ?>
                                        </span>
                                    </div>

                                    <!-- 精选标签 -->
                                    <?php if ($case['featured']): ?>
                                        <div class="absolute top-4 right-4">
                                            <span class="inline-block px-3 py-1 bg-accent text-white text-sm font-medium rounded-full">
                                                <?= htmlspecialchars($data['texts']['featured_tag']); ?>
                                            </span>
                                        </div>
                                    <?php endif; ?>

                                    <!-- 悬停查看按钮 -->
                                    <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 hover:opacity-100 transition-opacity duration-300 flex items-end">
                                        <div class="p-6 w-full">
                                            <a href="<?= htmlspecialchars($case['url']); ?>" class="inline-block w-full text-center px-5 py-3 bg-white text-primary font-medium rounded-lg hover:bg-primary hover:text-white transition-colors">
                                                <?= htmlspecialchars($data['texts']['view_details']); ?>
                                                <i class="fa fa-arrow-right ml-2"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>

                                <!-- 案例信息 -->
                                <div class="p-6 flex-grow flex flex-col">
                                    <div class="flex justify-between items-start mb-3">
                                        <h3 class="text-xl font-bold text-dark hover:text-primary transition-colors">
                                            <a href="<?= htmlspecialchars($case['url']); ?>">
                                                <?= htmlspecialchars($case['title']); ?>
                                            </a>
                                        </h3>
                                        <span class="text-gray-500 text-sm"><?= htmlspecialchars($case['year']); ?></span>
                                    </div>

                                    <p class="text-gray-600 mb-6 flex-grow">
                                        <?= htmlspecialchars($case['description']); ?>
                                    </p>

                                    <!-- 客户信息 -->
                                    <div class="flex items-center text-gray-500 text-sm mb-4">
                                        <i class="fa fa-building-o mr-2"></i>
                                        <span><?= htmlspecialchars($case['client']); ?></span>
                                        <span class="mx-2">•</span>
                                        <i class="fa fa-map-marker mr-2"></i>
                                        <span><?= htmlspecialchars($case['location']); ?></span>
                                    </div>

                                    <!-- 项目成果 -->
                                    <div class="pt-4 border-t border-gray-100 grid grid-cols-3 gap-2 text-center">
                                        <?php $i = 0;
                                        foreach ($case['results'] as $label => $value): ?>
                                            <?php if ($i < 3): ?>
                                                <div>
                                                    <div class="text-primary font-semibold"><?= htmlspecialchars($value); ?></div>
                                                    <div class="text-xs text-gray-500 mt-1"><?= htmlspecialchars($label); ?></div>
                                                </div>
                                            <?php endif;
                                            $i++; ?>
                                        <?php endforeach; ?>
                                    </div>
                                </div>
                            </div>
                        </div>
                    <?php endforeach; ?>
                </div>
            <?php endif; ?>
        <?php endif; ?>

        <!-- 查看更多按钮 -->
        <?php if ($data['show_more'] && !empty($moreUrl)): ?>
            <div class="text-center mt-12">
                <a
                    href="<?= htmlspecialchars($moreUrl); ?>"
                    class="inline-flex items-center border-2 border-<?= $data['accent_color']; ?> text-<?= $data['accent_color']; ?> hover:bg-<?= $data['accent_color']; ?>/5 font-medium py-3 px-6 rounded-lg transition-colors duration-300">
                    <?= htmlspecialchars($data['more_text']); ?>
                    <i class="fa <?= htmlspecialchars($data['button_icon']); ?> ml-2"></i>
                </a>
            </div>
        <?php endif; ?>
    </div>
</section>